<template>
  <div class="app-container">
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <h3>其他出库单</h3>
      <el-button type="success" size="small" @click="handleAdd">
        <i class="el-icon-plus" /> 可出库
      </el-button>
    </div>
    <!-- 自定义下划线，替代el-divider -->
    <div class="custom-divider" />
    <!-- 搜索区域使用 transform 包裹 -->
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wapper">
        <div>
          <el-form
            ref="searchForm"
            :model="outWarehouseQuery"
            :inline="true"
            label-width="90px"
          >
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
                style="width: 350px"
                @change="handleDateChange"
              />
            </el-form-item>

            <el-form-item label="商品">
              <el-select
                v-model="outWarehouseQuery.goodsId"
                placeholder="请选择商品"
                clearable
                style="width: 200px"
                @change="handleGoodsChanges"
              >
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="客户">
              <el-input
                v-model="outWarehouseQuery.customer"
                placeholder="请输入客户"
                clearable
                @change="handleCustomerChange"
                style="width: 200px"
              ></el-input>
            </el-form-item> -->

            <el-form-item label="负责人">
              <el-select
                v-model="outWarehouseQuery.directorId"
                placeholder="请选择负责人"
                clearable
                filterable
                remote
                :loading="directorLoading"
                :remote-method="searchDirectors"
                @focus="onDirectorFocus"
                style="width: 200px"
                @change="handleDirectorChange"
              >
                <el-option
                  v-for="item in directorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="状态">
              <el-select
                v-model="outWarehouseQuery.status"
                placeholder="请选择状态"
                clearable
                style="width: 150px"
                @change="handleStatusChange"
              >
                <el-option label="待审核" :value="0" />
                <el-option label="审核中" :value="1" />
                <el-option label="已审核" :value="2" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <!-- 顶部信息区域 -->
    <div class="info-header">
      <div class="header-right">
        <el-form
          ref="searchForm"
          :model="outWarehouseQuery"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="负责人">
            <el-select
              v-model="outWarehouseQuery.directorId"
              placeholder="请选择负责人"
              clearable
              filterable
              remote
              :loading="directorLoading"
              :remote-method="searchDirectors"
              @focus="onDirectorFocus"
              style="width: 200px"
              @change="handleDirectorChange"
            >
              <el-option
                v-for="item in directorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="日期范围">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              style="width: 350px"
              @change="handleDateChange"
            />
          </el-form-item>

          <!-- <el-form-item label="商品">
            <el-select
              v-model="outWarehouseQuery.goodsId"
              placeholder="请选择商品"
              clearable
              style="width: 200px"
              @change="handleGoodsChanges"
            >
              <el-option
                v-for="item in goodsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item label="客户">
              <el-input
                v-model="outWarehouseQuery.customer"
                placeholder="请输入客户"
                clearable
                @change="handleCustomerChange"
                style="width: 200px"
              ></el-input>
            </el-form-item> -->

          <el-form-item label="状态">
            <el-select
              v-model="outWarehouseQuery.status"
              placeholder="请选择状态"
              clearable
              style="width: 150px"
              @change="handleStatusChange"
            >
              <el-option label="待审核" :value="0" />
              <el-option label="已审核" :value="1" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >
            {{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            ></i>
          </el-button> -->
        <!-- <div class="attachment-info">
            <i class="el-icon-paperclip"></i> 上传附件
            <span class="order-number">单据编号: QTRK202503210001</span>
          </div> -->
        <!-- <el-button type="success" size="small" @click="handleAdd">
            <i class="el-icon-plus"></i> 可出库
          </el-button> -->
      </div>
    </div>

    <!-- 商品列表区域 -->
    <el-table
      :data="outboundList"
      border
      style="width: 100%; margin-top: 20px"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column label="商品明细" width="600" align="center">
        <template slot-scope="scope">
          <div
            v-if="scope.row.list && scope.row.list.length > 0"
            class="goods-detail-container"
          >
            <!-- 循环渲染每个商品项 -->
            <div
              v-for="(item, index) in scope.row.list"
              :key="index"
              class="goods-item"
            >
              <div class="goods-row">
                <!-- 第一行：商品名称、仓库、数量、单价 -->
                <div class="goods-name">{{ item.goodsName }}</div>
                <div class="goods-type">{{ item.warehouseName }}</div>
                <div class="goods-number">
                  数量:
                  <span class="number-value" style="color: #409eff">{{
                    item.number
                  }}</span>
                </div>
                <div class="goods-price">
                  单价:
                  <span class="price-value" style="color: #67c23a"
                    >¥{{ item.unitPrice }}</span
                  >
                </div>
                <!-- <div class="goods-tax-rate">
                  税率:
                  <span class="tax-rate-value" style="color: #e6a23c"
                    >{{ item.taxRate }}%</span
                  >
                </div>
                <div class="goods-tax-price">
                  税额:
                  <span class="tax-price-value" style="color: #f56c6c"
                    >¥{{ item.taxPrice }}</span
                  >
                </div> -->
                <div class="goods-total">
                  总价:
                  <span class="total-value" style="color: #409eff"
                    >¥{{ item.totalPrice }}</span
                  >
                </div>
                <!-- <div class="goods-tax-total">
                  含税:
                  <span class="tax-total-value" style="color: #f56c6c"
                    >¥{{ item.totalTaxPrice }}</span
                  >
                </div> -->
              </div>
            </div>
          </div>
          <div v-else class="no-goods">暂无商品</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="type" label="类型" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type === 1 ? "出库" : "入库" }}</span>
          </template>
        </el-table-column> -->
      <el-table-column
        prop="directorName"
        label="负责人"
        width="120"
        align="center"
      />
      <el-table-column
        prop="operatorName"
        label="操作人"
        width="120"
        align="center"
      />
      <el-table-column
        prop="remark"
        label="备注"
        min-width="150"
        align="center"
      />
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">
            {{ scope.row.status === 1 ? "已审核" : "待审核" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            :disabled="scope.row.status === 1"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="warning"
            size="small"
            :disabled="scope.row.status === 1"
            @click="handleAudit(scope.row)"
            >审核</el-button
          >
          <el-button
            type="danger"
            size="small"
            :disabled="scope.row.status === 1"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 操作按钮行 -->
    <div v-if="selectedRowIndex >= 0" class="table-operation-row">
      <div class="operation-buttons">
        <el-button
          type="success"
          size="mini"
          icon="el-icon-plus"
          circle
          @click="addRow"
        />
        <el-button
          type="danger"
          size="mini"
          icon="el-icon-close"
          circle
          @click="removeRow"
        />
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="outWarehouseQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="outWarehouseQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        style="text-align: right"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 表格底部汇总行 -->
    <!-- <div class="summary-row">
        <span class="summary-label">合计:</span>
        <div class="summary-cells"></div>
        <span class="summary-amount">{{ totalAmount.toFixed(2) }}</span>
      </div> -->

    <!-- 备注区域 -->
    <!-- <div class="remarks-section">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="若无备注信息"
          v-model="orderData.remarks"
        >
        </el-input>
      </div> -->

    <!-- 底部工具栏 -->
    <!-- <div class="footer-toolbar">
        <el-button type="text" icon="el-icon-document">
          <i class="el-icon-edit-outline"></i> 自定义字段
        </el-button>
        <div class="right-actions">
          <el-button type="text" @click="handleHistory">历史单据</el-button>
          <el-button type="text">操作日志</el-button>
        </div>
      </div> -->
    <!-- 分页 -->

    <!-- 添加新增按钮 -->
    <!-- <div class="operation-buttons">
      <el-button type="primary" @click="handleAdd">
        <i class="el-icon-plus"></i> 新增
      </el-button>
    </div> -->

    <!-- 新增弹框 -->
    <!-- <el-dialog title="新增" :visible.sync="dialogVisible" width="600px">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="供应商" prop="supplier">
          <el-select
            v-model="addForm.supplier"
            placeholder="请选择供应商"
            style="width: 100%"
          >
            <el-option
              v-for="item in supplierOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品" prop="goodsId">
          <el-select
            v-model="addForm.goodsId"
            placeholder="请选择商品"
            style="width: 100%"
            @change="handleGoodsChange"
          >
            <el-option
              v-for="item in goodsList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="仓库" prop="warehouseId">
          <el-select
            v-model="addForm.warehouseId"
            placeholder="请选择仓库"
            style="width: 100%"
          >
            <el-option
              v-for="item in warehouseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量" prop="number">
          <el-input
            v-model="addForm.number"
            style="width: 100%"
            @input="handleNumberInput"
          ></el-input>
        </el-form-item>

        <el-form-item label="单价" prop="unitPrice">
          <el-input
            v-model="addForm.unitPrice"
            type="number"
            placeholder="请输入单价"
            :disabled="true"
            @input="handlePriceChange"
          ></el-input>
        </el-form-item>

        <el-form-item label="总价">
          <el-input
            v-model="addForm.totalPrice"
            disabled
            placeholder="自动计算"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="addForm.remark"
            placeholder="请输入备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog> -->

    <!-- 可出库列表弹框 -->
    <el-dialog
      title="可出库列表"
      :visible.sync="outboundDialogVisible"
      width="80%"
    >
      <!-- 调试信息 -->
      <div style="margin-bottom: 10px">
        <small>数据条数: {{ canOutList ? canOutList.length : 0 }}</small>
      </div>

      <!-- 有数据时显示列表 -->
      <el-table
        v-if="canOutList && canOutList.length > 0"
        ref="outboundTable"
        :data="canOutList"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        @selection-change="handleOutboundSelectionChange"
      >
        <!-- 多选框列 -->
        <el-table-column type="selection" width="55" align="center" />

        <!-- 主数据列 -->
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column
          prop="directorName"
          label="负责人"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.directorName || "-" }}
          </template>
        </el-table-column>
        <el-table-column label="单据类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 1" type="primary">领料单</el-tag>
            <el-tag v-else-if="scope.row.type === 2" type="success"
              >工程领料</el-tag
            >
            <el-tag v-else>其他出库</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            {{ formatCreateTime(scope.row.createTime) }}
          </template>
        </el-table-column>

        <!-- 商品明细列 -->
        <el-table-column label="商品明细" min-width="800" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.list && scope.row.list.length > 0">
              <el-table :data="scope.row.list" border style="width: 100%">
                <el-table-column
                  label="商品"
                  align="center"
                  prop="goodsName"
                />
                <el-table-column
                  label="仓库"
                  align="center"
                  prop="warehouseName"
                />
                <el-table-column
                  label="数量"
                  align="center"
                  prop="number"
                />
                <el-table-column label="单价" align="center">
                  <template slot-scope="subScope">
                    {{
                      subScope.row.unitPrice
                        ? "¥" + subScope.row.unitPrice
                        : "-"
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="总价" align="center">
                  <template slot-scope="subScope">
                    {{
                      subScope.row.totalPrice
                        ? "¥" + subScope.row.totalPrice
                        : "-"
                    }}
                  </template>
                </el-table-column>
                <!-- <el-table-column label="税率" width="80" align="center">
                  <template slot-scope="subScope">
                    {{
                      subScope.row.taxRate ? subScope.row.taxRate + "%" : "-"
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="税额" width="100" align="center">
                  <template slot-scope="subScope">
                    {{
                      subScope.row.taxPrice ? "¥" + subScope.row.taxPrice : "-"
                    }}
                  </template>
                </el-table-column>
                <el-table-column label="含税总价" width="120" align="center">
                  <template slot-scope="subScope">
                    {{
                      subScope.row.totalTaxPrice
                        ? "¥" + subScope.row.totalTaxPrice
                        : "-"
                    }}
                  </template>
                </el-table-column> -->
              </el-table>

              <!-- 每个订单的摘要信息 -->
              <div class="order-summary">
                <span
                  >数量合计: {{ calculateTotalQuantity(scope.row.list) }}</span
                >
                <span
                  >金额合计: ¥{{
                    formatNumber(calculateTotalAmount(scope.row.list))
                  }}</span
                >
                <span
                  >含税合计: ¥{{
                    formatNumber(calculateTotalTaxAmount(scope.row.list))
                  }}</span
                >
              </div>
            </div>
            <div v-else class="empty-data">
              <i class="el-icon-document"></i>
              <p>暂无商品明细</p>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="projectName"
          label="项目"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.projectName || "-" }}
          </template>
        </el-table-column>

        <!-- 备注列 -->
        <el-table-column prop="remark" label="备注" width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.remark || "-" }}
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <!-- <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleOutbound(scope.row)"
              >出库</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 批量出库操作统计区域 -->
      <div v-if="selectedOutboundItems.length > 0" class="selected-summary">
        <div class="selected-info">
          已选择 {{ selectedOutboundItems.length }} 条记录
        </div>
      </div>

      <!-- 没有数据时显示提示 -->
      <!-- <div
        v-if="!outboundList || outboundList.length === 0"
        class="no-data"
      >
        <i class="el-icon-circle-close"></i>
        <p>没有可出库的数据</p>
      </div> -->

      <!-- 对话框底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="outboundDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          :disabled="selectedOutboundItems.length === 0"
          @click="handleOutboundSubmit"
          >批量出库</el-button
        >
      </div>
    </el-dialog>

    <!-- 编辑出库单对话框 -->
    <el-dialog title="编辑出库单" :visible.sync="dialogVisible" width="80%">
      <div v-if="editForm">
        <!-- 商品明细表格 -->
        <el-table
          :data="editForm.list"
          border
          style="width: 100%; margin-bottom: 20px"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column label="商品" width="150" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.goodsId"
                placeholder="请选择商品"
                style="width: 100%"
                @change="(val) => handleItemGoodsChange(val, scope.$index)"
              >
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="仓库" width="150" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.warehouseId"
                placeholder="请选择仓库"
                style="width: 100%"
              >
                <el-option
                  v-for="item in warehouseList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="数量" width="150" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.number"
                :min="1"
                :precision="0"
                @change="() => calculateItemTotal(scope.$index)"
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column label="单价" width="150" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.unitPrice"
                :min="0"
                :precision="2"
                :step="0.01"
                @change="() => calculateItemTotal(scope.$index)"
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column label="金额" width="150" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.totalPrice"
                disabled
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column label="税率(%)" width="150" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.taxRate"
                :min="0"
                :max="100"
                :precision="2"
                :step="0.01"
                @change="() => calculateItemTotal(scope.$index)"
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column label="税额" width="150" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.taxPrice"
                disabled
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column label="含税总价" width="150" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.totalTaxPrice"
                disabled
                style="width: 100%"
              />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="removeItem(scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-bottom: 20px">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="addItem"
            >添加商品</el-button
          >
        </div>

        <el-form
          ref="form"
          :model="editForm"
          :rules="rules"
          label-width="100px"
          style="margin-bottom: 20px"
        >
          <el-form-item label="负责人" prop="directorId">
            <el-select
              v-model="editForm.directorId"
              placeholder="请选择负责人"
              clearable
              filterable
              style="width: 100%"
            >
              <el-option
                v-for="item in directorList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="客户" prop="customer">
            <el-input
              v-model="editForm.customer"
              placeholder="请输入客户信息"
              clearable
            />
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="editForm.remark"
              type="textarea"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-form>

        <!-- 金额摘要信息 -->
        <!-- <div class="order-summary">
          <span>数量合计: {{ calculateTotalQuantity() }}</span>
          <span>金额合计: ¥{{ formatNumber(calculateTotalAmount()) }}</span>
          <span>含税合计: ¥{{ formatNumber(calculateTotalTaxAmount()) }}</span>
        </div> -->
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog title="审核" :visible.sync="auditDialogVisible" width="400px">
      <el-form :model="auditForm" label-width="80px">
        <el-form-item label="备注">
          <el-input
            v-model="auditForm.remark"
            type="textarea"
            placeholder="请输入审核备注"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAudit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selCanOutWarehouseListApi,
  selOutWarehouseListApi,
  addOutWarehouseApi,
  updateOutWarehouseByIdApi,
  delOutWarehouseByIdApi,
  handleOutWarehouseByIdApi,
} from "@/api/warehouse";
import { selGoodsListApi, selGoodsByIdApi } from "@/api/goods";
import {
  selSupplierListApi,
  selWarehouseListApi,
  selStaffListApi,
} from "@/api/system";

export default {
  name: "OtherWarehouseReceipts",
  data() {
    return {
      orderData: {
        supplier: "",
        salesperson: "",
        orderDate: new Date().toISOString().substr(0, 10),
        businessCategory: "other_in",
        businessType: "other",
        remarks: "",
      },
      tableData: [
        {
          productName: "",
          productCategory: "",
          brand: "",
          attributes: "",
          unit: "",
          warehouse: "",
          availableStorage: 0,
          quantity: 1,
          packageInfo: "",
          unitPrice: "",
          amount: "",
        },
      ],
      salesPersonOptions: [
        { value: "person1", label: "张三" },
        { value: "person2", label: "李四" },
        { value: "person3", label: "王五" },
      ],
      warehouseOptions: [
        { value: "wh1", label: "默认仓库" },
        { value: "wh2", label: "冷藏仓库" },
        { value: "wh3", label: "食品仓库" },
      ],
      scanEnabled: false,
      selectedRowIndex: -1,
      totalAmount: 0,
      isFilterVisible: false, // 控制筛选框的显示与隐藏
      dialogVisible: false,
      addForm: {
        directorId: "",
        goodsId: "",
        number: 1,
        operatorId: "",
        remark: "",
        totalPrice: 0,
        unitPrice: "",
        warehouseId: "",
        customer: "",
      },
      // 商品查询参数
      goodsQuery: {
        goodsTypeId: null,
        name: "",
        page: 1,
        pageSize: 10,
        supplierId: null,
        warehouseId: null,
      },
      // 仓库列表查询
      warehouseQuery: {
        page: 1,
        pageSize: 10,
        name: "",
      },
      // 供应商查询参数
      supplierQuery: {
        name: "",
        page: 1,
        pageSize: 10,
        supplierTypeId: "",
      },
      supplierOptions: [], // 供应商列表
      rules: {
        customer: [
          { required: true, message: "请输入供应商信息", trigger: "blur" },
        ],
        goodsId: [{ required: true, message: "请选择商品", trigger: "change" }],
        warehouseId: [
          { required: true, message: "请选择仓库", trigger: "change" },
        ],
        number: [{ required: true, message: "请输入数量", trigger: "blur" }],
        unitPrice: [{ required: true, message: "请输入单价", trigger: "blur" }],
      },
      goodsList: [], // 商品列表
      selectedGoodsInfo: null, // 存储选中的商品详情
      // 添加查询参数对象
      outWarehouseQuery: {
        directorId: "", // 负责人ID
        endTime: "", // 结束时间
        page: 1, // 当前页
        pageSize: 10, // 每页条数
        startTime: "", // 开始时间
        status: "", // 状态
      },
      // 日期范围
      dateRange: [],
      // 添加分页组件
      total: 0,
      canOutDialogVisible: false, // 可出库列表弹窗显示状态
      canOutList: [], // 可出库列表数据
      selectedItems: [], // 选中的项目
      // 新增出库单表单
      outboundForm: {
        customer: "", // 客户
        directorId: "", // 负责人ID
        goodsId: 0, // 商品ID
        number: 0, // 数量
        operatorId: "", // 操作人ID
        remark: "", // 备注
        totalPrice: 0, // 总价
        unitPrice: 0, // 单价
        warehouseId: 0, // 仓库ID
      },
      outboundList: [], // 出库单列表
      // 职员列表
      staffQuery: {
        page: 1,
        pageSize: 10,
        name: "",
        mobile: "",
        parent: "",
      },
      // 编辑出库单表单
      editForm: {
        id: "",
        customer: "",
        directorId: "",
        operatorId: "",
        remark: "",
        status: "",
        list: [],
      },
      warehouseList: [],
      auditDialogVisible: false,
      auditForm: {
        id: null,
        operatorId: "", // 当前登录用户ID
        remark: "",
      },
      outboundDialogVisible: false,
      selectedOutboundItems: [],
      directorLoading: false,
      directorList: [],
    };
  },
  watch: {
    tableData: {
      handler: function (val) {
        this.calculateTotal();
      },
      deep: true,
    },
    "editForm.number": {
      handler(newVal) {
        const number = parseFloat(newVal) || 0;
        const unitPrice = parseFloat(this.editForm.unitPrice) || 0;
        this.editForm.totalPrice = number * unitPrice;
      },
      immediate: true,
    },
    "editForm.unitPrice": {
      handler(newVal) {
        const unitPrice = parseFloat(newVal) || 0;
        const number = parseFloat(this.editForm.number) || 0;
        this.editForm.totalPrice = number * unitPrice;
      },
      immediate: true,
    },
  },
  created() {
    this.selOutWarehouseList(); // 出库单列表
    this.selGoodsList(); // 商品列表
    this.selWarehouseList(); // 仓库列表
    this.selSupplierList(); // 供应商列表
    this.selStaffList(); // 职员列表
  },
  methods: {
    // 获取可新建的出库单查询
    async selCanOutWarehouseList() {
      try {
        const res = await selCanOutWarehouseListApi();
        if (res.code === 1) {
          this.canOutList = res.data || [];
          this.canOutDialogVisible = true;
        } else {
          this.$message.error(res.msg || "获取可出库列表失败");
        }
      } catch (error) {
        console.error("获取可出库列表失败:", error);
        this.$message.error("获取可出库列表失败");
      }
    },
    // 获取出库单列表
    async selOutWarehouseList() {
      try {
        const res = await selOutWarehouseListApi(this.outWarehouseQuery);
        this.outboundList = res.records || [];
        this.total = res.total || 0;
      } catch (error) {
        console.error("获取出库单列表失败:", error);
        this.$message.error("获取出库单列表失败");
      }
    },
    // 获取商品列表
    async selGoodsList() {
      const res = await selGoodsListApi(this.goodsQuery);
      this.goodsList = res.records || [];
    },
    // 获取仓库列表
    async selWarehouseList() {
      const res = await selWarehouseListApi(this.warehouseQuery);
      this.warehouseList = res.records || [];
    },
    // 获取供应商列表
    async selSupplierList() {
      const res = await selSupplierListApi(this.supplierQuery);
      this.supplierOptions = res.records;
    },
    // 审核
    handleAudit(row) {
      this.auditForm = {
        id: row.id,
        operatorId: "", // 从vuex获取当前用户ID
        remark: "",
      };
      this.auditDialogVisible = true;
    },
    // 提交审核
    async submitAudit() {
      try {
        const loading = this.$loading({
          lock: true,
          text: "正在处理...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });

        const params = {
          id: this.auditForm.id,
          operatorId: this.$store.getters.userId || "",
          remark: this.auditForm.remark || "",
        };

        const res = await handleOutWarehouseByIdApi(params);

        loading.close();

        if (res.code === 1) {
          this.$message.success("审核成功");
          this.auditDialogVisible = false;
          this.selOutWarehouseList(); // 刷新列表
        } else {
          this.$message.error(res.msg || "审核失败");
        }
      } catch (error) {
        console.error("审核失败:", error);
        this.$message.error("审核失败: " + (error.message || "未知错误"));
      }
    },
    // 状态改变
    handleStatusChange(val) {
      this.selOutWarehouseList();
    },
    // 点击历史单据
    handleHistory() {
      this.$router.push({
        name: "OtherWarehouseReceiptsHistoricalDocuments",
      });
    },
    openSupplierSelector() {
      // 打开供应商选择器
      this.$message("打开供应商选择器");
    },
    handleProductSelect(index, row) {
      // 记录当前选中行索引
      this.selectedRowIndex = index;
      // 模拟选择商品后的数据填充
      this.$set(this.tableData[index], "productName", "商品" + (index + 1));
      this.$set(this.tableData[index], "productCategory", "食品");
      this.$set(this.tableData[index], "brand", "品牌" + (index + 1));
      this.$set(this.tableData[index], "attributes", "常温");
      this.$set(this.tableData[index], "unit", "个");
      this.$set(this.tableData[index], "availableStorage", 100);
    },

    // 计算总数量
    calculateTotalQuantity(items) {
      if (!items || !items.length) return 0;
      return items.reduce((sum, item) => sum + (Number(item.number) || 0), 0);
    },

    // 计算总金额
    calculateTotalAmount(items) {
      if (!items || !items.length) return 0;
      return items.reduce(
        (sum, item) => sum + (Number(item.totalPrice) || 0),
        0
      );
    },

    // 计算含税总金额
    calculateTotalTaxAmount(items) {
      if (!items || !items.length) return 0;
      return items.reduce(
        (sum, item) => sum + (Number(item.totalTaxPrice) || 0),
        0
      );
    },
    // 格式化数字为金额形式
    formatNumber(num) {
      if (!num) return "0.00";
      return parseFloat(num).toFixed(2);
    },
    addRow() {
      const newIndex = this.selectedRowIndex + 1;
      this.tableData.splice(newIndex, 0, {
        productName: "",
        productCategory: "",
        brand: "",
        attributes: "",
        unit: "",
        warehouse: "",
        availableStorage: 0,
        quantity: 1,
        packageInfo: "",
        unitPrice: "",
        amount: "",
      });
      this.selectedRowIndex = newIndex;
    },
    removeRow() {
      if (this.tableData.length > 1) {
        this.tableData.splice(this.selectedRowIndex, 1);
        this.selectedRowIndex = Math.min(
          this.selectedRowIndex,
          this.tableData.length - 1
        );
      } else {
        this.$message.warning("至少保留一行");
      }
    },
    calculateRowAmount(row) {
      if (row.quantity && row.unitPrice) {
        row.amount = (
          parseFloat(row.quantity) * parseFloat(row.unitPrice)
        ).toFixed(2);
      }
      this.calculateTotal();
    },
    calculateUnitPrice(row) {
      if (row.amount && row.quantity) {
        row.unitPrice = (
          parseFloat(row.amount) / parseFloat(row.quantity)
        ).toFixed(2);
      }
    },
    calculateTotal() {
      this.totalAmount = this.tableData.reduce((sum, row) => {
        return sum + (parseFloat(row.amount) || 0);
      }, 0);
    },
    handleSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const loading = this.$loading({
              lock: true,
              text: "正在保存...",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });

            // 构造API所需的参数对象
            const params = {
              // id: parseInt(this.editForm.id),
              customer: this.editForm.customer || "", // 添加customer参数
              directorId: this.editForm.directorId || "",
              operatorId: this.$store.getters.userId || "",
              remark: this.editForm.remark || "",
              list: this.editForm.list.map((item) => ({
                goodsId: parseInt(item.goodsId),
                warehouseId: parseInt(item.warehouseId),
                number: parseInt(item.number),
                unitPrice: parseFloat(item.unitPrice),
                totalPrice: parseFloat(item.totalPrice),
                // 不需要传递taxRate、taxPrice和totalTaxPrice
              })),
            };

            // 确保不传递materialRequisitionTrackId参数
            // 如果后端必须要，可以设置为null或0: params.materialRequisitionTrackId = null;

            console.log("提交的参数：", params); // 调试用，可以查看提交的参数

            const res = await updateOutWarehouseByIdApi(this.editForm.id,params);

            loading.close();

            if (res.code === 1) {
              this.$message.success("保存成功");
              this.dialogVisible = false;
              this.selOutWarehouseList(); // 刷新列表
            } else {
              this.$message.error(res.msg || "保存失败");
            }
          } catch (error) {
            console.error("保存失败:", error);
            this.$message.error("保存失败: " + (error.message || "未知错误"));
          }
        }
      });
    },
    // 表单验证
    validateForm() {
      if (!this.selectedGoods?.id) {
        this.$message.warning("请选择商品");
        return false;
      }
      if (!this.orderData.warehouse) {
        this.$message.warning("请选择仓库");
        return false;
      }
      if (!this.orderData.quantity || this.orderData.quantity <= 0) {
        this.$message.warning("请输入有效的数量");
        return false;
      }
      if (!this.orderData.unitPrice || this.orderData.unitPrice <= 0) {
        this.$message.warning("请输入有效的单价");
        return false;
      }
      return true;
    },
    // 重置表单
    resetForm() {
      if (this.$refs.addForm) {
        this.$refs.addForm.resetFields();
      }
      this.orderData = {
        supplier: "",
        warehouse: "",
        quantity: 1,
        unitPrice: "",
        remarks: "",
      };
      this.selectedGoods = null;
      this.totalAmount = 0;
      this.addForm = {
        directorId: "",
        goodsId: "",
        number: 1,
        operatorId: "",
        remark: "",
        totalPrice: 0,
        unitPrice: "",
        warehouseId: "",
        customer: "",
      };
      this.selectedGoodsInfo = null;
    },
    // 点击新增按钮
    handleAdd() {
      this.selCanOutWarehouseList();
      this.outboundDialogVisible = true;
    },
    // 处理数量输入实时更新
    handleNumberInput(value) {
      if (!value || !this.addForm.unitPrice) {
        this.addForm.totalPrice = 0;
        return;
      }

      const number = parseFloat(value);
      const unitPrice = parseFloat(this.addForm.unitPrice);

      if (!isNaN(number) && !isNaN(unitPrice)) {
        this.addForm.totalPrice = number * unitPrice;
      }
    },

    // 处理单价变化
    handlePriceChange(value) {
      if (!value || !this.addForm.number) {
        this.addForm.totalPrice = 0;
        return;
      }

      const number = parseFloat(this.addForm.number);
      const unitPrice = parseFloat(value);

      if (!isNaN(number) && !isNaN(unitPrice)) {
        this.addForm.totalPrice = number * unitPrice;
      }
    },

    // 商品选择变化时的处理
    async handleGoodsChange(goodsId) {
      if (!goodsId) {
        this.selectedGoodsInfo = null;
        this.addForm.unitPrice = "";
        this.addForm.totalPrice = 0;
        return;
      }

      try {
        const res = await selGoodsByIdApi(goodsId);
        if (res.code === 1) {
          this.selectedGoodsInfo = res.data;
          if (this.selectedGoodsInfo) {
            // 设置单价
            this.addForm.unitPrice = this.selectedGoodsInfo.price || "";
            // 自动计算总价
            this.handleNumberInput(this.addForm.number);
          }
        } else {
          this.$message.error(res.msg || "获取商品信息失败");
        }
      } catch (error) {
        console.error("获取商品信息失败:", error);
        this.$message.error("获取商品信息失败");
      }
    },
    // 日期改变
    handleDateChange(val) {
      if (val) {
        // 设置开始时间为当天的 00:00:00
        const startDate = new Date(val[0]);
        startDate.setHours(0, 0, 0, 0);
        this.outWarehouseQuery.startTime = Math.floor(
          startDate.getTime() / 1000
        );

        // 设置结束时间为当天的 23:59:59
        const endDate = new Date(val[1]);
        endDate.setHours(23, 59, 59, 999);
        this.outWarehouseQuery.endTime = Math.floor(endDate.getTime() / 1000);
      } else {
        this.outWarehouseQuery.startTime = "";
        this.outWarehouseQuery.endTime = "";
      }
    },
    // 职工列表
    async selStaffList() {
      this.onDirectorFocus();
    },

    // 处理查询
    handleFilter() {
      this.outWarehouseQuery.page = 1;
      this.selOutWarehouseList();
    },

    // 重置查询条件
    handleReset() {
      this.outWarehouseQuery = {
        directorId: "",
        endTime: "",
        page: 1,
        pageSize: 10,
        startTime: "",
        status: "",
      };
      this.dateRange = [];
      this.selOutWarehouseList();
    },

    // 处理分页变化
    handleCurrentChange(val) {
      this.outWarehouseQuery.page = val;
      this.selOutWarehouseList();
    },

    // 处理每页条数变化
    handleSizeChange(val) {
      this.outWarehouseQuery.pageSize = val;
      this.selOutWarehouseList();
    },

    // 处理表格选择变化
    handleSelectionChange(selection) {
      this.selectedItems = selection;
    },

    // 处理批量出库按钮点击
    handleOutboundSubmit() {
      if (this.selectedOutboundItems.length === 0) {
        this.$message.warning("请至少选择一个订单");
        return;
      }

      // 先弹出对话框收集客户信息
      this.$prompt("请输入领用人", "客户信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入客户/领用人名称",
        inputPattern: /\S+/,
        inputErrorMessage: "客户/领用人不能为空",
      })
        .then(({ value }) => {
          // 用户输入客户信息后提交出库
          this.submitOutbound(value);

          this.outboundDialogVisible = false;
        })
        .catch(() => {
          // this.$message.info("已取消出库操作");
        });
    },

    // 实际提交出库的方法
    async submitOutbound(customerName) {
      try {
        const loading = this.$loading({
          lock: true,
          text: "正在提交...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });

        try {
          // 构造批量出库参数 - 每个订单都是单独的对象
          const requestData = this.selectedOutboundItems.map((order) => {
            return {
              // 使用用户输入的客户名称
              customer: customerName,
              directorId: order.directorId || "",
              // 使用当前行的id作为materialRequisitionTrackId
              materialRequisitionTrackId: order.id || 0,
              operatorId: this.$store.getters.userId || "",
              remark: order.remark || "",
              list: (order.list || []).map((item) => ({
                goodsId: item.goodsId,
                number: item.number,
                totalPrice: item.totalPrice || 0,
                unitPrice: item.unitPrice || 0,
                warehouseId: item.warehouseId,
              })),
            };
          });

          console.log("出库提交参数:", requestData); // 调试日志

          // 调用出库API - 传入数组
          const res = await addOutWarehouseApi(requestData);

          loading.close();

          if (res.code === 1) {
            this.$message.success("批量出库成功");
            this.canOutDialogVisible = false;
            this.selectedOutboundItems = []; // 清空选中列表
            this.selOutWarehouseList(); // 刷新列表
          } else {
            this.$message.error(`出库失败: ${res.msg || "未知错误"}`);
          }
        } catch (error) {
          loading.close();
          console.error("批量出库失败:", error);
          this.$message.error(`批量出库失败: ${error.message || "未知错误"}`);
        }
      } catch (error) {
        console.error("批量出库失败:", error);
        this.$message.error(`批量出库失败: ${error.message || "未知错误"}`);
      }
    },
    // 编辑
    async handleEdit(row) {
      // 深拷贝行数据，确保不影响原始数据
      this.editForm = {
        id: row.id,
        customer: row.customer || "",
        directorId: row.directorId,
        operatorId: row.operatorId || this.$store.getters.userId,
        remark: row.remark || "",
        status: row.status,
        list: row.list ? JSON.parse(JSON.stringify(row.list)) : [],
      };

      // 如果列表为空，添加一个空项
      if (!this.editForm.list || this.editForm.list.length === 0) {
        this.editForm.list = [
          {
            goodsId: "",
            goodsName: "",
            warehouseId: "",
            warehouseName: "",
            number: 1,
            unitPrice: 0,
            totalPrice: 0,
            taxRate: 0,
            taxPrice: 0,
            totalTaxPrice: 0,
          },
        ];
      } else {
        // 加载列表中每个商品的详细信息
        const loadGoodsPromises = this.editForm.list.map(async (item) => {
          if (item.goodsId) {
            try {
              // 调用API获取商品详情
              const res = await selGoodsByIdApi(item.goodsId);
              if (res.code === 1 && res.data) {
                // 更新商品名称
                item.goodsName = res.data.name;
              }
            } catch (error) {
              console.error("获取商品信息失败:", error);
            }
          }
        });

        // 等待所有商品信息加载完成
        await Promise.all(loadGoodsPromises);
      }

      this.dialogVisible = true;
    },
    // 单个订单出库
    handleOutbound(order) {
      this.selectedOutboundItems = [order];
      this.handleOutboundSubmit();
    },
    // 格式化创建时间
    formatCreateTime(timestamp) {
      if (!timestamp) return "-";

      // 时间戳可能是秒级的，需要转换为毫秒级
      const date = new Date(timestamp * 1000);

      // 格式化为YYYY-MM-DD HH:MM:SS
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 表格多选框选择变化处理
    handleOutboundSelectionChange(selection) {
      this.selectedOutboundItems = selection;
    },
    // 处理负责人选择获取焦点事件
    onDirectorFocus() {
      this.directorLoading = true;
      this.searchDirectors("");
    },
    // 搜索负责人方法
    async searchDirectors(query) {
      try {
        const res = await selStaffListApi({
          page: 1,
          pageSize: 9999,
          name: query,
        });

        this.directorList = res.records || [];
      } catch (error) {
        console.error("搜索负责人失败:", error);
        this.$message.error("搜索负责人失败");
        this.directorList = [];
      } finally {
        this.directorLoading = false;
      }
    },
    // 删除出库单
    async handleDelete(row) {
      try {
        // 显示确认对话框
        await this.$confirm("确定要删除该出库单吗？此操作不可逆", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        // 调用删除API
        const res = await delOutWarehouseByIdApi(row.id);

        if (res.code === 1) {
          this.$message.success("删除成功");
          // 刷新列表
          this.selOutWarehouseList();
        } else {
          this.$message.error(res.msg || "删除失败");
        }
      } catch (error) {
        if (error !== "cancel") {
          console.error("删除出库单失败:", error);
          this.$message.error("删除出库单失败");
        }
      }
    },
    // 添加商品方法
    addItem() {
      // 创建新的商品项模板
      const newItem = {
        goodsId: "", // 商品ID
        goodsName: "", // 商品名称
        warehouseId: "", // 仓库ID
        warehouseName: "", // 仓库名称
        number: 1, // 默认数量
        unitPrice: 0, // 默认单价
        totalPrice: 0, // 默认总价
        taxRate: 0, // 默认税率
        taxPrice: 0, // 默认税额
        totalTaxPrice: 0, // 默认含税总价
      };

      // 将新商品项添加到编辑表单的商品列表中
      this.editForm.list.push(newItem);
    },

    // 删除商品方法
    removeItem(index) {
      // 确保至少保留一项商品
      if (this.editForm.list.length > 1) {
        // 从列表中移除指定索引的商品
        this.editForm.list.splice(index, 1);
      } else {
        this.$message.warning("至少需要保留一项商品");
      }
    },

    // 商品选择变更方法
    async handleItemGoodsChange(goodsId, index) {
      // 如果没有选择商品ID或索引无效，则返回
      if (!goodsId || index === undefined) return;

      const item = this.editForm.list[index];
      if (!item) return;

      try {
        // 调用API获取商品详情
        const res = await selGoodsByIdApi(goodsId);

        if (res.code === 1 && res.data) {
          const goodsInfo = res.data;

          // 更新商品信息
          item.goodsName = goodsInfo.name || "";
          item.unitPrice = goodsInfo.price || 0;

          // 重新计算金额
          this.calculateItemTotal(index);
        }
      } catch (error) {
        console.error("获取商品信息失败:", error);
        this.$message.error("获取商品信息失败");
      }
    },

    // 仓库选择变更方法
    handleItemWarehouseChange(warehouseId, index) {
      if (!warehouseId || index === undefined) return;

      const item = this.editForm.list[index];
      if (!item) return;

      // 查找对应的仓库信息
      const warehouse = this.warehouseList.find((w) => w.id === warehouseId);
      if (warehouse) {
        item.warehouseName = warehouse.name || "";
      }
    },

    // 计算单个商品项的金额方法 (更新版本)
    calculateItemTotal(index) {
      const item = this.editForm.list[index];
      if (!item) return;

      // 确保数值类型正确
      const number = parseInt(item.number) || 0;
      const unitPrice = parseFloat(item.unitPrice) || 0;
      const taxRate = parseFloat(item.taxRate) || 0;

      // 计算不含税总价
      const totalPrice = number * unitPrice;
      item.totalPrice = totalPrice.toFixed(2);

      // 计算税额
      const taxPrice = totalPrice * (taxRate / 100);
      item.taxPrice = taxPrice.toFixed(2);

      // 计算含税总价
      const totalTaxPrice = totalPrice + taxPrice;
      item.totalTaxPrice = totalTaxPrice.toFixed(2);
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.search-wapper {
  margin-bottom: 15px;
}

.header-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.field-item {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 10px;
}

.label {
  margin-right: 5px;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.header-right .el-button {
  margin-left: 10px;
  margin-bottom: 10px;
}

.attachment-info {
  margin-left: 20px;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.order-number {
  margin-left: 20px;
  color: #666;
}

.scan-toggle {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.required {
  color: #f56c6c;
  margin-right: 2px;
}

.warehouse-header,
.quantity-header,
.price-header,
.amount-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-operation-row {
  background-color: #fffbe6;
  padding: 8px;
  text-align: center;
  border-left: 1px solid #dfe6ec;
  border-right: 1px solid #dfe6ec;
}

.summary-row {
  display: flex;
  background-color: #fcfcfc;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  font-weight: bold;
}

.summary-label {
  width: 50px;
}

.summary-cells {
  flex: 1;
}

.summary-amount {
  width: 120px;
  text-align: right;
  padding-right: 20px;
}

.remarks-section {
  margin-top: 20px;
}

/* 自定义下划线 */
.custom-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 13px 0;
}

.footer-toolbar {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
}

.right-actions {
  display: flex;
}

.el-input-number--small {
  width: 100%;
}

.el-table .selected-row {
  background-color: #fffbe6;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.operation-buttons {
  margin-bottom: 20px;
}

.dialog-footer {
  text-align: right;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 自定义下划线 */
.custom-divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 13px 0;
}

/* 订单摘要信息样式 */
.selected-summary {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  background-color: #f8f8f8;
  border: 1px solid #ebeef5;
  border-top: none;
  margin-bottom: 10px;
}

.selected-info {
  font-size: 14px;
  color: #409eff;
  font-weight: bold;
}

.goods-detail-container {
  width: 100%;
}

.goods-item {
  padding: 8px;
  border-bottom: 1px solid #ebeef5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.goods-name {
  font-weight: bold;
  width: 120px;
  margin-right: 15px;
}

.goods-number,
.goods-price,
.goods-tax-rate,
.goods-tax-price,
.goods-total,
.goods-tax-total {
  margin-right: 15px;
  white-space: nowrap;
}

.no-goods {
  padding: 20px;
  text-align: center;
  color: #909399;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #909399;
}

.no-data i {
  font-size: 40px;
  margin-bottom: 10px;
}

.no-data p {
  margin: 0;
  font-size: 14px;
}
</style>
